<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3003074_rvum6rv3n1k.css">
    <link rel="stylesheet" href="../css/detail.css">
    <title>Document</title>
</head>

<body>
    <div class="top">
        <div class="contain">
            <ul class="left">
                <li>帮助中心</li>
                <li>收藏</li>
                <li>
                    <a href="../views/index.html">360首页</a>
                </li>
                <li>360智慧生活</li>
            </ul>
            <ul class="right">
                <li class="on">
                    <span>你好</span>
                </li>
                <li class="off active">
                    <a href="../views/login.html">登录</a>
                    <a href="../views/registered.html">注册</a>
                </li>
                <li class="off active">
                </li>
                <li >
                    <a href="../views/cart.html" class="iconfont icon-line-shoppingbaggouwubao-02"></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="logo">
        <div class="contain">
            <div class="left">
                <img src="https://p1.qhimg.com/t0102789b8d00c3dfce.png" alt="">
                <p>新品推荐</p>
                <p>热卖榜单</p>
            </div>
            <div class="right">
                <input type="text">

                <ul class="a">
                    <li>记录仪</li>
                    <li>摄像机</li>
                    <li>路由器</li>
                    <li>耳机</li>
                    <li>扫地机</li>
                    <li>只能手表</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="detail" >
        <div class="contain" id="box">
            <div class="left">
                <div class="head show">
                    <img src="" alt="">
                </div>
                <div class="bottom list">
                    <ul>
                        <!-- js渲染 -->
                    </ul>
                </div>
                <div class="mask"></div>
            </div>
            <div class="enlarge">
                <img src="" alt="">
            </div>
            <div class="right">
                <!-- js渲染 -->
            </div>
        </div>
    </div>

    <script src="../js/utils.js"></script>
    <script src="../js/detail.js"></script>
    <script>
        const e1 = new Enlarge('#box')
    </script>
</body>

</html>